<template>
  <div class="countDetail">
    <div class="commonSearch">
      <div :class="['commonContent',isCollapse ? '' : 'isShowMore']">
        <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
          <el-form-item label="生产日期">
            <el-date-picker
              v-model="daterange"
              type="date"
              :clearable="false"
              @change="handleDateRange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="设备">
            <el-select v-model="searchForm.deviceId" filterable clearable>
              <el-option
                v-for="item in deviceSnList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="间隔">
            <custom-interval @getInterval="getInterval" @changeCollapse="changeCollapse"></custom-interval>
          </el-form-item>
        </el-form>
        <my-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          style="flex-shirk:0;height:28px;width:73px;margin-left:20px"
          v-throttle:200="searchList"
        >查询</my-button>
      </div>
    </div>

    <div class="btnSet">
      <my-button
        type="primary"
        size="mini"
        icon="el-icon-upload2"
        plain
        @btnClick="handleExportCountList"
      >导出</my-button>
    </div>

    <!-- 表格 -->
    <table-list ref="tableList" :searchForm="searchForm"></table-list>
  </div>
</template>

<script>
import { deviceDropDown } from "@/api/lampController";
import tableList from "./tableList.vue";
import customInterval from "./customInterval.vue";
import fileDownload from "js-file-download";
import { exportCountList } from "@/api/deviceController";
export default {
  data() {
    return {
      searchForm: {
        deviceId: "",
        page: 1,
        limit: 10
      },
      deviceSnList: [],
      daterange: new Date(),
      start: "yyyy-MM-dd 00:00:00",
      end: "yyyy-MM-dd 23:59:59",
      isCollapse: false
    };
  },
  components: {
    tableList,
    customInterval
  },
  mounted() {
    const start = new Date().dateFormat(this.start);
    const end = new Date().dateFormat(this.end);
    this.searchForm.startTime = start;
    this.searchForm.endTime = end;
    console.log("---");
    this.getDeviceDropDown();
  },
  methods: {
    handleExportCountList() {
      exportCountList(this.searchForm).then(res => {
        fileDownload(
          res,
          "计数明细" + new Date().dateFormat("yyyyMMddhhmmss"),
          "application/vnd.ms-excel;charset=UTF-8"
        );
      });
    },
    getInterval(payload) {
      this.searchForm.startSecond = payload.startSecond;
      this.searchForm.endSecond = payload.endSecond;
    },
    searchList() {
      this.$refs.tableList.getCountList(this.searchForm);
    },
    handleDateRange(val) {
      this.searchForm.startTime = val.dateFormat(this.start);
      this.searchForm.endTime = val.dateFormat(this.end);
    },
    changeCollapse(val) {
      this.isCollapse = val;
    },
    //设备下拉
    getDeviceDropDown: async function() {
      const res = await deviceDropDown({});
      if (res.code == 200) {
        this.deviceSnList = res.data;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.countDetail {
  .commonSearch {
    position: relative;
    .commonContent {
      .el-form-item--mini.el-form-item {
        width: 33%;

        ::v-deep .el-select {
          width: 100%;
        }

        ::v-deep .el-date-editor.el-input {
          width: 100%;
        }
      }
    }

    .isShowMore {
      height: 40px;
      overflow: hidden;
    }
  }

  .btnSet {
    display: flex;
    padding: 20px 0;
    justify-content: space-between;
  }
}
</style>